<template>
  <view style="width: 100%;height: 100%;position: relative;">
	<!-- <image :src="imageSrc" mode="aspectFit" :style="imageStyle" style="border-radius: 8px;" @click="previewImage" v-if="imageSrc == '/static/loaddingImg.gif'"/> -->
	<image :src="errorImage" mode="aspectFit" :style="imageStyle" style="border-radius: 8px;background-color: #000;" @click="previewImage" v-if="isError"/>
    <image :src="imageSrc" :mode="mode" lazy-load @error="imgError" :style="imageStyle" style="border-radius: 8px;" @click="previewImage" v-else/>
	<text style="position: absolute;right: 0;top: 0;background-color: rgba(0, 0, 0, 0.3);padding: 5rpx 15rpx;border-radius: 0 8px 0 8px;" v-if="isGifVal">gif</text>
  </view>
</template>

<script>
import { login } from '../../apis/modules/user';
import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
export default {
  props: {
    srckey: {
      type: String,
      required: true,
	  default:''
    },
	noclick: {
	  type: Boolean,
	  default:false
	},
    placeholder: {
      type: String,
      default: '/static/loaddingImg.gif' // 默认占位图
    },
    errorImage: {
      type: String,
      default: '/static/logo.png' // 默认加载失败图
    },
    mode: {
      type: String,
      default: 'aspectFill'
    },
    imageStyle: {
      type: String | Object,
      default: 'width: 100%;height: 100%'
    },
	msgindex:{
		type: String | Number,
		default: '0'
	},
	zuindex:{
		type: Number,
		default: 0
	},
	isPreview:{
		type: Boolean,
		default: false
	},
  },
  data() {
    return {
      imageSrc: '',
	  fileTpye:'image',
	  uploadType:'chat',
	  isError:false,
	  isGifVal:false
    };
  },
  destroyed() {
	  this.$store.commit('deleteImages',{
		  url:this.imageSrc,
		  msgindex:this.msgindex,
		  zuindex:this.zuindex
	  })
  },
  mounted() {
    this.loadImage();
  },
  methods: {
    async loadImage() {
	   try {
		 const cachedMedia = await mediaCache.loadMedia(this.srckey, this.uploadType, this.fileTpye);
		 this.imageSrc = cachedMedia;
		 this.isGifVal = this.isGif(this.imageSrc)
		 this.isError = false
	   } catch (error) {
	     this.handleLoadError(error);
	   }
	   if(this.isPreview){
		   this.$store.commit('pushImages',{
			   url:this.imageSrc,
			   msgindex:this.msgindex,
			   zuindex:this.zuindex
		   })
	   }
    },
	isGif(url) {
		console.log(url);
	    return /\.(gif|GIF)$/.test(url);
	},
    handleLoadError(error) {
      this.isError = true
    },
    imgError(e) {
      this.isError = true
    },
	previewImage() {
		if(this.noclick)return
		let current = this.$store.getters.imageUrlsIndex({
			url:this.imageSrc,
			msgindex:this.msgindex,
			zuindex:this.zuindex
		})
		if(current == -1 && this.isPreview){
			this.$store.commit('pushImages',{
			   url:this.imageSrc,
			   msgindex:this.msgindex,
			   zuindex:this.zuindex
			})
		}
		uni.previewImage({
			urls: this.$store.getters.imageUrls(),
			current: this.$store.getters.imageUrlsIndex({
				url:this.imageSrc,
				msgindex:this.msgindex,
				zuindex:this.zuindex
			}),
			showmenu: true,
			indicator: 'number',
		});
	},
  }
};
</script>

<style scoped lang="scss">
	image{
		display: block;
	}
  /* 添加一些默认样式 */
</style>
